<!DOCTYPE html>
<html>
<head>
    {include file="common/meta" /}
    {include file="common/link" /}
</head>
<body class="body-1">
<div id="container">
  <div class="mui-content">
      <div class="custom-search" >
        <form action="" method="POST">

          <input type="search" class="custom-search-input keywords " placeholder="搜索商品" name="keywords" value="{$keywords}" />
          <button type="submit" class="custom-search-button">搜索</button>
        </form>
        </div>
    <!-- start -->
    <style type="text/css">
        .list-view {background: #f9f9f9;}
        .list-view .list-item {
            display: -webkit-box;
        }
        .list-view .p {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            margin-left: 8px;
        }
        .list-view .p-pic {
            width: 100px;
            height: 100px;
        }
        .list-view .d {
            margin: 4px 15px 6px 0;
            -webkit-box-flex: 1;
        }
        .list-view .d-title {
            font-size: 14px;
            height: 44px;
        }
        .page-container {}
        .page-container>li {
            min-height: 80px;
            padding: 12px 6px;
            border-bottom: 1px solid #dbdbdb;
            position: relative;
        }
        .page-container>li .p {
            display: inline-block;
            text-align: center;
            overflow: hidden;
        }
        .page-container>li .p a {
            line-height: 79px;
            display: inline-block;
            position: relative;
        }
        .page-container>li .d-title {
            line-height: 22px;
            margin-bottom: 3px;
            position: relative;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
            color: #4b566a;
        }
        .page-container>li .d p {
            line-height: 24px;
            color: #999;
        }
        .page-container>li .d .d-price .h {
            font-size: 16px;color: #eb5211;
        }
        .page-container>li .d .price-icon {
            font-family: arial;
            padding-right: 2px;
        }
        .page-container>li .d .font-num {
            font-family: avenir arial;
        }
        .page-container>li .d .d-price del {
            font-size: 10px;
            margin-left: 5px;
        }
        .page-container>li .d .d-main {
            display: -webkit-box;
            margin-top: -1px;
            height: 26px;
            overflow: hidden;
        }
        .page-container>li .d p {
            line-height: 24px;
            color: #999;
        }
        .page-container>li .d .d-specs {
            font-size: 12px; color: #999;
        }
        .page-container>li .d .d-main p {
            font-size: 12px;
            overflow: hidden;
        }
        .page-container>li .d .d-main .d-num {
            -webkit-box-flex: 1;
            text-align: center; font-size: 16px;color: #eb5211;
        }

        .page-container>li .d .d-main .d-num .price-icon {
            font-family: arial;
            padding-right: 2px;
        }
        .page-container>li .d .d-main .d-num .font-num {
            font-family: avenir arial;
        }
        .page-container>li .d .d-main .d-num del {
            font-size: 10px;
            margin-left: 5px; color: #999;
        }

        .page-container>li .d .d-main .d-area {
            width: 25px;
            height: 25px;
            line-height: 27px;
            text-align: center;
            background-color: #efefef;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
    </style>
    <div class="list-view">
        <ul class="page-container">
            <!-- 列表开始 -->
            {volist name="list" id="vo"}
                <li>
                    <div class="list-item">
                        <div class="p">
                            <a href="#" title="">
                                <img class="p-pic" src="{$vo.image}" style="visibility: visible;">
                            </a>
                        </div>
                        <div class="d">
                            <a href="#" title=""><h3 class="d-title">{$vo.title}</h3></a>
                            <p class="d-specs">{$vo.specs}</p>
                            <p class="d-specs">库存: <span style="color: red">{$vo.stock}</span></p>
                            <div class="d-main">
                                <p class="d-freight">品牌: {$vo.brands.name}</p>
                                <p class="d-num">
                                    <em class="h">
                                        <span class="price-icon">¥</span><span class="font-num getprice">{$vo.price}</span>
                                    </em>
<!--                                    <del><span class="price-icon">¥</span><span class="font-num">99</span></del>-->
                                </p>
                                {if condition=" $vo.num > 0"}
                                <div class="buy-select-num fr">
                                    <div data-numbox-min="1" data-numbox-max="" class="mui-numbox line_box">
                                        <button type="button" class="mui-btn mui-btn-numbox-minus line-right  " disabled>-</button>
                                        <input type="tel" class="mui-input-numbox line-num" value="{$vo.num}" data-id="{$vo.id}">
                                        <button type="button" class="mui-btn mui-btn-numbox-plus line-left">+</button>
                                    </div>
                                </div>
                                {else /}
                                <p class="d-area addcart " data-id="{$vo.id}"><i class="iconfont icon-gouwuche01"></i></p>
                                {/if}
                            </div>
                        </div>
                    </div>
                </li>
            {/volist}

            <!-- 列表结束 -->
        </ul>
    </div>
      <div class="weui-loadmore">
          <i class="weui-loading"></i>
          <span class="weui-loadmore__tips">正在加载</span>
      </div>
      <div class="list-item" style="min-height: 40px;">

      </div>
    <!-- end -->
    <!--  -->
    <!--  -->
  </div>
    <input type="hidden" class="storehouse" value="1">
  <!--mui-content-end--> 
</div>
    {include file="common/footer" /}
    {include file="common/script" /}
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
</body>
</html>

<script>
    var imgs = $('.am-gallery-item img')

    imgs.each(function() {
        var imgsW = $(this).width()
        var imgsH = $(this).height()
        if (imgsW > imgsH) {
            $(this).css({'height': '100%', 'width': 'auto'})
        } else {
            $(this).css({'width': '100%', 'height': 'auto'})
        }
    })
    page = 1
    pagesize = 10
    var loading = false;  //状态标记
    var total = "{$total}"
    if(total<pagesize){
        loading = true;
        // $('.weui-loadmore__tips').html('暂无数据')
        $('.weui-loadmore').hide()
    }
    $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        var total = "{$total}"
        if(total<pagesize){
            loading = true;
            // $('.weui-loadmore__tips').html('暂无数据')
            $('.weui-loadmore').hide()
            return; false;
        }
        var url = "{$turl}"+'/web/index/getgoods'
        $.post(url,{page:page,pagesize:pagesize,keywords:$('.keywords').val()},function (res) {
            loading = false;
            if(res.data.length >0){
                page++;
                var str = '';
                for (var i=0;i<res.data.length;i++){
                    str+='<li>\n' +
                        '                    <div class="list-item">\n' +
                        '                        <div class="p">\n' +
                        '                            <a href="#" title="">\n' +
                        '                                <img class="p-pic" src="'+res.data[i]['image']+'" style="visibility: visible;">\n' +
                        '                            </a>\n' +
                        '                        </div>\n' +
                        '                        <div class="d">\n' +
                        '                            <a href="#" title=""><h3 class="d-title">'+res.data[i]['title']+'</h3></a>\n' +
                        '                            <p class="d-specs">'+res.data[i]['specs']+'</p>\n' +
                        '                            <p class="d-specs">库存: <span style="color: red">'+res.data[i]['stock']+'</span></p>\n' +
                        '                            <div class="d-main">\n' +
                        '                                <p class="d-freight">品牌: '+res.data[i]['brands']['name']+'</p>\n' +
                        '                                <p class="d-num">\n' +
                        '                                    <em class="h">\n' +
                        '                                        <span class="price-icon">¥</span><span class="font-num">'+res.data[i]['price']+'</span>\n' +
                        '                                    </em>\n' +
                        '<!--                                    <del><span class="price-icon">¥</span><span class="font-num">99</span></del>-->\n' +
                        '                                </p>\n' ;
                            if(res.data[i]['num'] >0){
                                str += ' <div class="buy-select-num fr">\n' +
                                    '                                    <div data-numbox-min="1" data-numbox-max="" class="mui-numbox line_box">\n' +
                                    '                                        <button type="button" class="mui-btn mui-btn-numbox-minus line-right  " disabled>-</button>\n' +
                                    '                                        <input type="tel" class="mui-input-numbox line-num" value="'+res.data[i]['num']+'" data-id="'+res.data[i]['id']+'">\n' +
                                    '                                        <button type="button" class="mui-btn mui-btn-numbox-plus line-left">+</button>\n' +
                                    '                                    </div>\n' +
                                    '                                </div>';
                            }else{
                                str +=  '                                <p class="d-area addcart " data-id="'+res.data[i]['id']+'"><i class="iconfont icon-gouwuche01"></i></p>\n' ;
                            }

                        str +='     </div>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                </li>'
                }
                $('.page-container').append(str)
            }else{
                loading = true;
                $('.weui-loadmore__tips').html('已经到底了')
                $('.weui-loading').hide()
                // $('.weui-loadmore_line').attr('style','display:block')
            }
        })

    });
    $('.page-container').on('click','.addcart',function () {
        var goods_id = $(this).data('id')
        var url = "{$turl}"+'/web/goods/addcart'
        $.post(url,{goods_id:goods_id,storehouse_id:$('.storehouse').val()},function (res) {
            layer.msg(res.msg)
            if(res.code >0){
                getcount()
            }
        })
    })

</script>
<script>
    var state = 0;
    //减少
    $('.line-right').on('click',function () {
        var num = $(this).next().val()
        var cart_id = $(this).next().data('id')
        if(num <=1){
            $(this).attr("disabled",true);
        }
        ajaxcart(cart_id,num)
        // console.log(num)
    })
    //增加
    $('.line-left').on('click',function () {
        var num = $(this).prev().val()
        var cart_id = $(this).prev().data('id')
        ajaxcart(cart_id,num)
    })
    $('.line-num').on('change',function () {
        var num = $(this).val()
        var cart_id = $(this).data('id')
        if(num <=1){
            $(this).attr("disabled",true);
            num = 1;
        }
        if(state == 1){
            return false;
        }
        ajaxcart(cart_id,num)
    })
    function ajaxcart(goods_id,num) {
        state = 1;
        var url = "{$turl}"+'/web/goods/updatecarts'
        $.post(url,{goods_id:goods_id,num:num},function (res) {
            state = 0;
        }).fail(function() {
            state = 0;
            layer.msg('接口异常')
        })
    }
    // $('.page-container').on('click','.getprice',function () {
    //     layer.open({
    //         type: 1,
    //         skin: 'layui-layer-rim', //加上边框
    //         area: ['50%', '70%'], //宽高
    //         content: '杭州仓库:20;库存:20px<br>杭州仓库:20;<br>杭州仓库:20;<br>杭州仓库:20;<br>'
    //     });
    // })
</script>
<!---不带扇形 带footer->
